@use 'sass:map';

@use '@/assets/styles/common/var.scss' as *;
@use '@/assets/styles/mixins/_button.scss' as *;
@use '@/assets/styles/mixins/mixins.scss' as *;
@use '@/assets/styles/mixins/utils.scss' as *;
@use '@/assets/styles/mixins/_var.scss' as *;

$button-icon-span-gap: () !default;
$button-icon-span-gap: map.merge(
                (
                        'large': 16px,
                        'default': 12px,
                        'small': 8px,
                ),
                $button-icon-span-gap
);

@include b(button) {
    @include set-component-css-var('button', $button);
}

@include b(button) {
    width: 100%;
    box-sizing: border-box;
    //padding: 20px 30px;
    font-weight: getCssVar('button', 'font-weight');
    height: map.get($input-height, 'default');
    text-align: center;
    display: inline-block;
    border-radius: 10px;
    color: getCssVar('button', 'text-color');
    border: getCssVar('border');
    border-color: getCssVar('button', 'border-color');
    background-color: getCssVar('button', 'bg-color');

    > span {
        display: inline-flex;
        align-items: center;
    }

    & + & {
        margin-left: 12px;
    }

    & {
        @include button-size(
                        map.get($button-padding-vertical, 'default') - $button-border-width,
                        map.get($button-padding-horizontal, 'default') - $button-border-width,
                        map.get($button-font-size, 'default'),
                        map.get($button-border-radius, 'default')
        );
    }

    @include when(disabled) {
        color: getCssVar('button', 'disabled', 'text-color');
        cursor: not-allowed;
        background-image: none;
        background-color: getCssVar('button', 'disabled', 'bg-color');
        border-color: getCssVar('button', 'disabled', 'border-color');
    }

    @include when(round) {
        border-radius: 100px !important;
    }

    @each $size in (large, small) {
        @include m($size) {
            @include set-css-var-value(
                                    ('button', 'size'),
                            map.get($input-height, $size)
            );

            height: getCssVar('button', 'size');

            & [class*='#{$namespace}-icon'] {
                & + span {
                    margin-left: map.get($button-icon-span-gap, $size);
                }
            }

            & {
                @include button-size(
                                map.get($button-padding-vertical, $size) - $button-border-width,
                                map.get($button-padding-horizontal, $size) - $button-border-width,
                                map.get($button-font-size, $size),
                                map.get($button-border-radius, $size)
                );
            }

            @include when(circle) {
                width: getCssVar('button', 'size');
                padding: map.get($button-padding-vertical, $size) - $button-border-width;
            }
        }
    }

    @each $type in (primary, success, warning, danger, info) {
        @include m($type) {
            @include button-variant($type);
        }
    }

    @include when(plain) {
        @include css-var-from-global(
                                ('button', 'hover', 'text-color'),
                                ('color', 'primary')
        );
        @include css-var-from-global(
                                ('button', 'hover', 'bg-color'),
                                ('fill-color', 'blank')
        );
        @include css-var-from-global(
                                ('button', 'hover', 'border-color'),
                                ('color', 'primary')
        );
    }

    @include when(text) {
        color: var(--background-color);
        background: none;
        border: none;
    }

    @include when(concern) {
        color: var(--text-color);
        background-color: var(--background-color);
    }
}
